<template>
  <div>
    <!--顶部背景图-->
    <template>
      <el-carousel height="480px">
        <el-carousel-item v-for="arr in bannerArr">
          <img :src="arr" width="100%" height="100%"/>
        </el-carousel-item>
      </el-carousel>
    </template>
    <!--数字优逸云-->
    <h1>数字优逸云</h1>
    <h4>以打造用户极致体验为目标，让行业生态链更智慧</h4>
    <div class="layout-row">
      <div class="layout-col1">
        <el-card :body-style="{ padding: '0px' }">
          <img src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAg-rfe8gUosIuZogMw7gQ44wI!600x600.png.webp" width="100%" />
          <div style="padding: 14px;">
            <span>团队成员均来自资深企业运营专家、企业信息顾问、软件研发、大数据分析等</span><br />
            <span>专业领域，对大健康行业有着深刻理解，团队将通过信息化手段与大健康行业管理深度整合</span>
          </div>
        </el-card>
      </div>
      <div class="layout-col2">
        <el-card :body-style="{ padding: '41px', height: '329px'}" >
          <div class="layout-span"><span>1</span></div>
          <span>个目标</span>
          <el-divider></el-divider>
          <div class="layout-span"><span>10</span></div>
          <span>余年/多家合作伙伴</span>
          <el-divider></el-divider>
          <div class="layout-span"><span>18</span></div>
          <span>种产品线</span>
          <el-divider></el-divider>
          <div class="layout-span"><span>300</span></div>
          <span>家单位</span>
          <el-divider></el-divider>
          <div class="layout-span"><span>10000</span></div>
          <span>软件用户</span>
        </el-card>
      </div>
    </div>
    <!--产品与服务-->
    <h1>产品与服务</h1>
    <h4>服务只有起点，满意没有终点。为合作伙伴创造有价值的服务是我们一生的追求！</h4>
    <el-card shadow="hover" class="layout-card-banner">
      <div class="layout-banner-box">
        <div class="layout-banner-list" >
          <div v-for="src in imgArr">
            <img :src="src.url" />
            <p>{{src.title}}</p>
          </div>
        </div>
      </div>
    </el-card>
    <!--案例中心-->
    <h1>案例中心</h1>
    <h4>全行业解决方案，为您的企业量身定制最合适的信息化蓝图</h4>
    <div class="layout-case-body">
        <div>
          <div class="b_l_div">
            <img src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAggrCI8wUotNzWuwcw2AE4zQE.png.webp" />
            <div class="table_l_div">
              <h4>智慧仓储WMS系统助力企业实现提升效率</h4>
              <el-divider></el-divider>
              <p>您的企业与仓库是否面临以下痛点：仓库作业效率低，发货慢，不能及时发车......</p>
            </div>
          </div>
          <div class="t_r_div">
            <img src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAggrCI8wUotNzWuwcw2AE4zQE.png.webp" />
            <div class="table_l_div">
              <h4>费用管控，用大数据为企业快速决策提供工具</h4>
              <el-divider></el-divider>
              <p>返利规则复杂，财务无法快速出账？报表准确性难以保障？业务员绩效考核结果......</p>
            </div>
          </div>
        </div>
        <div>
          <div class="b_l_div">
            <img src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAggrCI8wUotNzWuwcw2AE4zQE.png.webp" />
            <div class="table_l_div">
              <h4>高效率OA协同在线办公</h4>
              <el-divider></el-divider>
              <p>在万物互联、信息爆炸的数字化时代，企业的管理者如何有效整合资源，通过内外部的广泛合作，加强协同......</p>
            </div>
          </div>
          <div class="t_r_div">
            <img src="https://22159555.s21i.faiusr.com/4/ABUIABAEGAAggrCI8wUotNzWuwcw2AE4zQE.png.webp" />
            <div class="table_l_div">
              <h4>B2B电商，助力企业实现销售精准定位</h4>
              <el-divider></el-divider>
              <p>医药电商以互联网平台为载体，将传统医药和新兴互联网技术有机结合，为用户提供购药......</p>
            </div>
          </div>
        </div>
    </div>
    <!--新闻动态-->
    <h1>新闻动态</h1>
    <h4>带你了解最全面的行业资讯与技术干货</h4>
    <div class="layout-new-body">
      <div>
        <div id="new-l-body">
          <div id="new-l-main">
            <div v-for="arr in newsArr">
              <div id="new-main-flex">
                <div id="new-main-div1">
                  <h2>{{arr.year}}</h2>
                  <span>{{arr.date}}</span>
                </div>
                <div id="new-main-div2"><hr /></div>
                <div id="new-main-div3">
                  <p>{{arr.title}}</p>
                  <span>{{arr.detail}}</span>
                </div>
              </div>
              <hr />
            </div>
          </div>
        </div>
        <div id="new-r-body">
          <div id="new-r-img1">
            <div>
              <img src="https://1.s140i.faiscm.com/2/AIwBCAAQAhgAILqXm9oFKK38wIIGMIAPOIAK!400x400.jpg" width="100%"/>
              <p>技术干货more+</p>
            </div>
          </div>
          <div id="new-r-img2">
            <div>
              <img src="https://1.s140i.faiscm.com/2/AIwBCAAQAhgAINWr6dcFKNe8_7IGMIAPOIAK!400x400.jpg" width="100%"/>
              <p>行业资讯more+</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--百度地图-->
    <div class="layout-contact">
      <div class="layout-contact-body">
        <h1>联系我们</h1>
        <h4>您可以通过以下方式，与我们进行联系</h4>
        <baidu-map
            class="map"
            :center="center"
            :zoom=17
            @ready="initMap"
            :scroll-wheel-zoom=true>
          <bm-info-window
              :position="{lng: 117.205824, lat: 31.84703}"
              title="合肥优逸云科技有限公司"
              :show="infoWindow.show">
            <p style="font-size: 14px; color: #666666" v-text="infoWindow.contents"></p>
          </bm-info-window>
          <bm-marker
              :position="{lng: 117.205624, lat: 31.84683}"
              :dragging="true"
              animation="BMAP_ANIMATION_BOUNCE">
          </bm-marker>
        </baidu-map>
        <div id="map-data1"><span>地点：安徽省合肥市高新区黄山路616号科大讯飞3号楼302-303</span></div>
        <div id="map-data2">
          <span>电话：400-86-18580</span>
          <div style="width: 50px; margin-top: 2.5px">/</div>
          <span>商务：18956082569 &nbsp&nbsp 18056020622</span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerArr:[
        'https://22159555.s21i.faiusr.com/4/ABUIABAEGAAglayLgwYo1Lj21AUwgA844AM.png.webp',
        'https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgi7eC8wUo_LnakQEwgA844AM.png.webp',
        'https://22159555.s21i.faiusr.com/4/ABUIABAEGAAgufL38gUowoqC2AUwgA844AM.png.webp',
        'https://2.ss.faisys.com/image/materialLib/image/3000193.jpg?v=201712181730',
      ],
      imgArr:[
        {url:'https://22159555.s21i.faiusr.com/2/ABUIABACGAAg783d8gUo4POBiQUw5gE4rAE.jpg.webp', title:'电商订货平台(B2B)'},
        {url:'https://22159555.s21i.faiusr.com/2/ABUIABACGAAgyMDd8gUogKe2kgQw5gE4qAE.jpg.webp', title:'智能仓储系统(WMS)'},
        {url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIKWbi9cFKNzRn2owgA84gAo!300x300.jpg', title:'小程序电商平台(O2O)'},
        {url:'https://22159555.s21i.faiusr.com/2/ABUIABACGAAg8M3d8gUo3-fUkgIw5gE4rAE.jpg.webp', title:'药品批发连锁(ERP)'},
        {url:'https://1.s140i.faiscm.com/2/AIwBCAAQAhgAIPqzi9cFKO3C66IHMIAPOIAK!300x300.jpg', title:'OA在线办公平台'},
        {url:'\thttps://1.s140i.faiscm.com/2/AIwBCAAQAhgAIMur7tcFKICpzsECMIAPOIAK!300x300.jpg', title:'两票制费用管控系统'},
      ],
      newsArr:[
        {year: '2021', date: '08-19', title: '32家药企高管离职，230+药商退市，医药职场大调整？', detail:'截至目前（8月17日），已有恒瑞医药、海正药业、华北制药等32家药企旗...'},
        {year: '2021', date: '08-19', title: '32家药企高管离职，230+药商退市，医药职场大调整？', detail:'截至目前（8月17日），已有恒瑞医药、海正药业、华北制药等32家药企旗...'},
        {year: '2021', date: '08-19', title: '32家药企高管离职，230+药商退市，医药职场大调整？', detail:'截至目前（8月17日），已有恒瑞医药、海正药业、华北制药等32家药企旗...'},
        {year: '2021', date: '08-19', title: '32家药企高管离职，230+药商退市，医药职场大调整？', detail:'截至目前（8月17日），已有恒瑞医药、海正药业、华北制药等32家药企旗...'},
      ],

      infoWindow: {
        show: true,
        contents: '安徽省合肥市高新区黄山路616号科大讯飞3号楼3层'
      },
      center: {  //经纬度
        lng: 117.205624,
        lat: 31.84703,
      },
      BMap:null,  //百度地图对象
      map:null,   //百度地图实例
    };
  },

  methods: {
    initMap({BMap, map}) {
      this.BMap = BMap;
      this.map = map;
      this.$set(this.center, 'lng',117.205624);
      this.$set(this.center, 'lat',31.84703);
      this.zoom = 'auto';
    }

  },
  mounted() {
      let list = document.querySelector('.layout-banner-list')
      let box = document.querySelector('.layout-banner-box')
      //复制一份
      list.innerHTML += list.innerHTML
      let left = 0
      let timer
      timer = setInterval(function () {
          left -= 2
          if (left === -(6*325)){
            left = 0
          }
          list.style.left = left + 'px'
        },20);
      box.onmouseenter = function () {
        clearInterval(timer)
      }
      box.onmouseleave = function () {
        timer = setInterval(function () {
          left -=2
          if (left === -(6*325)){
            left = 0
          }
          list.style.left = left + 'px'
        },20);
      }
  }
}
</script>

<style scoped>
@keyframes enter1 {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(500px, 500px, 0);
    animation-timing-function: linear;
  }
  50% {
    opacity: .5;
    transform: scale3d(0.75, 0.75, 0.75) translate3d(0, -60px, 0);
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
}



@keyframes enter {
  0% {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1500px, 0);
    animation-timing-function: linear;
  }
  50% {
    opacity: .5;
    transform: scale3d(0.75, 0.75, 0.75) translate3d(0, -60px, 0);
    animation-timing-function: linear;
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
}

.map {
  margin: 0 auto;
  width: 911px;
  height: 232px;
}
.layout-contact {
  background-color: #5874d8;
  padding-top: 10px;
  height: 495px;
}
.layout-contact-body {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  height: 445px;
  color: white;
}
#map-data1, #map-data2 {
  font-size: 14px;
}
#map-data1 {
  padding-top: 15px;
  margin: 0 auto;
  width: 911px;
  height: 14px;
}
#map-data1>span {
  float: left;
}
#map-data2 {
  padding-top: 5px;
  margin: 0 auto;
  height: 14px;
  width: 911px;
  display: flex;
}

h1 {
  margin-top: 50px;
  font-size: 30px;
}
h4{
  margin: 30px 0;
  font-size:14px;
}
.layout-row {
  margin: 0 auto;
  width: 1200px;
  height: 500px;
}
.layout-col1 {
  animation: 2s linear 0s normal enter1;
  float: left;
  width: 590px;
  height: 410px;
  position: relative;
  top: 50px;
  left: 100px;
}
.layout-col1 span {
  line-height: 14px;
  display: block;
  color: #666;
  font-size: 14px;
}
.layout-col2 {
  animation: 2s linear 0s normal enter1;
  float: right;
  display: inline-block;
  width: 390px;
  position: relative;
  top: 50px;
  right: 100px;
}
.layout-col2 span {
  color: #666;
  font-size: 14px;
}
.layout-col2 .layout-span {
  display: inline-block;
  float: left;
  position: relative;
  left: 50px;
  width: 100px;
}
.layout-col2 .layout-span span {
  display: inline-block;
  color: #333;
  font-size: 24px;
}
/*无缝轮播图*/
.layout-card-banner {
  margin: 0 auto;
  width: 1200px;
  height: 368px;
}
.layout-banner-box {
  position: relative;
  margin: 40px 20px;
  overflow: hidden;
  height: 242px;
}
.layout-banner-box>.layout-banner-list{
  position: relative;
  left: 0;
  display: flex;
  align-items: center;
}
.layout-banner-list > div {
  position: relative;
  margin-right: 30px;
  width: 360px;
  height: 242px;
}
.layout-banner-list>div>p, #new-r-img1>div>p, #new-r-img2>div>p {
  background-color: #000;
  opacity:0.6;
  filter:alpha(opacity=60); /* IE8 及更早版本 */
  color: #fff;
  position: absolute;
  bottom: 1px;
  width: 100%;
}
.layout-banner-list>div>img {
  width: 325px;
  height: 242px;
}
/*案例中心*/
.layout-case-body {
  background-color: #a9a9a9;
  margin: 0 auto;
  padding-top: 5px;
  width: 1200px;
  height: 490px;
}
.layout-case-body>div {
  margin: 20px auto;
  width: 940px;
  height: 210px;
}
.layout-case-body>div>div {
  background-color: white;
  display: flex;
  float: left;
  width: 460px;
  height: 210px;
}
.b_l_div {
  animation: 5s linear 0s normal enter;
}
.t_r_div {
  float: right !important;
  animation: 5s linear 0s normal enter;
}
.layout-case-body>div>div>div {
  margin-left: 20px;
  float: right;
  width: 203px;
}
.table_l_div{
  text-align: left;
}
.table_l_div>h4 {
  font-size: 16px;
  color: #4b4b4b;
  margin: 20px 0;
}
.table_l_div>p {
  font-size: 14px;
  color: #a9a9a9;
}
/*新闻动态*/
.layout-new-body {
  padding-top: 10px;
  margin: 0 auto;
  height: 500px;
}
.layout-new-body > div {
  margin: 0 auto;
  width: 1030px;
}
#new-l-body, #new-r-body {
  display: inline-block;
  height: 410px;
}

/*新闻动态：左新闻栏*/
#new-l-body {
  float: left;
  width: 640px;
}
#new-l-main>div {
  height: 90px;
}
#new-main-flex {
  display: flex;
  margin: 10px 0;
  height: 82px;
}
#new-main-div1 {
  padding: 16px 10px;
}
#new-main-div1 > h2 {
  margin-bottom: 5px;
  font-size: 24px;
}
#new-main-div2 {
  width:50px;
  /*div内元素的居中*/
  display: flex;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
}
#new-main-div2 > hr {
  height: 70%;
  background-color: #dcdfe6;
  vertical-align: center;
}
#new-main-div3 {
  padding: 12px 10px;
}
#new-main-div3 > p,#new-main-div3 > span {
  float: left;
}
#new-main-div3 > p {
  font-size:16px;
}
#new-main-div3 > span {
  margin-top: 14px;
  font-size:14px;
  color: #666;
}
#new-main-div1 > h2, #new-main-div1 > span {
  color: #626971;
}

/*新闻动态：右图片栏*/
#new-r-body {
  float: right;
  width: 300px;
}
#new-r-body > #new-r-img1 {
  margin-bottom: 8px;
}
#new-r-img1, #new-r-img2{
  font-size: 13px;
  position: relative;
}



</style>



